<template>
  <div class="cart_box">
    <!-- <tabbar></tabbar> -->

    <h2>购物车</h2>
    <table>
      <tr>
        <td>
          <input type="checkbox" />
        </td>
        <td>
          <img src="../../assets/cart/index-ph01.png" alt />
        </td>
        <td class="cart_text">
          <div>超级大品牌服装，现在买只要998</div>
          <p>颜色：经典绮丽款</p>
          <p>尺寸：L</p>
          <div class="cart_num">
            <button>-</button>
            <div>3</div>
            <button>+</button>
            <span>&yen; 653.00</span>
          </div>
        </td>
      </tr>
    </table>
    <div class="cart_bottom">
      <div class="cart_bottom_left">合计：&yen; 108.90</div>
      <router-link to="/buy" class="cart_bottom_right">去结算(2)</router-link>
    </div>
  </div>
</template>

<script>
// import tabbar from "../../components/tabbar";

export default {
  props: {},
  data() {
    return {};
  },
  computed: {},
  created() {},
  mounted() {},
  watch: {},
  methods: {},
  components: {
    // tabbar
  }
};
</script>

<style scoped lang='less'>
.cart_box {
  height: 100%;
  margin-bottom: 100px;

  h2 {
    background-color: rgb(255, 74, 74);
    text-align: center;
    height: 80px;
    color: white;
    line-height: 80px;
  }
  table {
    tr {
      margin: 10px;
      td {
        padding: 5px;
        input {
          width: 30px;
          transform: scale(2.5, 2.5);
        }
        img {
          height: 130px;
        }
      }
      .cart_text {
        .cart_num {
          margin: 5px 0;
          display: flex;
          justify-content: space-between;
          button {
            width: 30px;
            height: 30px;
          }
          div {
            line-height: 30px;
          }
        }
      }
    }
  }
  .cart_bottom {
    position: fixed;
    bottom: 100px;
    left: 0;
    right: 0;
    display: flex;
    color: white;
    .cart_bottom_left {
      flex: 6;
      text-align: center;
      height: 60px;
      line-height: 60px;
      font-size: 19px;
      background-color: rgb(51, 51, 51);
    }
    .cart_bottom_right {
      color: white;
      flex: 4;
      text-align: center;
      height: 60px;
      line-height: 60px;
      font-size: 19px;
      background-color: rgb(70, 184, 17);
    }
  }
}
</style>
